<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<body>

<div th:fragment="topbar">
    <!-- ##### Header Area Start ##### -->
    <header class="header-area">
        <!-- Top Header Area -->
        <div class="top-header">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <!-- Breaking News Area -->
                    <div id="newsarea" class="col-12 col-sm-10">
                        <div class="breaking-news-area" th:fragment="news">
                            <div id="breakingNewsTicker" class="ticker" style="height: 24px;">
                                <ul>
                                    <li th:each="news:${newslist}"><a th:href="${news.content}"
                                                                      th:text="${news.title}"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Top Social Area -->
                    <div class="col-12 col-sm-2">
                        <div class="top-social-area">
                            <a href="https://weibo.com/u/3002528610" data-toggle="tooltip" data-placement="bottom" title="Weibo"><i
                                    class="fa fa-weibo" aria-hidden="true"></i></a>
                            <a href="https://github.com/ray0728" data-toggle="tooltip" data-placement="bottom"
                               title="Github"><i
                                    class="fa fa-github" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logo Area -->
        <div class="logo-area text-center">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-12">
                        <a href="/home" class="original-logo"><img src="/global/img/core-img/logo.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Nav Area -->
        <div class="original-nav-area" id="stickyNav">
            <div class="classy-nav-container breakpoint-off">
                <div class="container">
                    <!-- Classy Menu -->
                    <nav class="classy-navbar justify-content-between">

                        <ul class="navbar-nav" sec:authorize="!isAuthenticated()">
                            <div class="btn-group">
                                <a class="btn btn-outline-light" href="/login">Sign in</a>
                                <a class="btn btn-outline-light ml-1" href="/join">Sign up</a>
                            </div>
                        </ul>
                        <ul class="navbar-nav" sec:authorize="isAuthenticated()">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
                                   sec:authentication="name"></a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="/notifications">Notifications</a>
                                    <a class="dropdown-item" href="/blog/edit">Create Blog</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/profile">Profile</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/logout">Logout</a>
                                </div>
                            </li>
                        </ul>

                        <!-- Navbar Toggler -->
                        <div class="classy-navbar-toggler">
                            <span class="navbarToggler"><span></span><span></span><span></span></span>
                        </div>

                        <!-- Menu -->
                        <div class="classy-menu" id="originalNav">
                            <!-- close btn -->
                            <div class="classycloseIcon">
                                <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                            </div>

                            <!-- Nav Start -->
                            <div class="classynav">
                                <ul>
                                    <li><a href="/">Home</a></li>
                                    <li><a href="#">Blog</a>
                                        <ul class="dropdown">
                                            <li><a href="/blog/list">All</a></li>
                                            <li th:each="category:${categories}"><a
                                                    th:href="${'/blog/list?cid=' + category.cid}"
                                                    th:text="${category.desc}"></a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="/about">About Us</a></li>
                                    <li><a href="/contact">Contact</a></li>
                                </ul>

                                <!-- Search Form  -->
                                <div id="search-wrapper">
                                    <form action="#">
                                        <input type="text" id="search" placeholder="Search something...">
                                        <div id="close-icon"></div>
                                        <input class="d-none" type="submit" value="">
                                    </form>
                                </div>
                            </div>
                            <!-- Nav End -->
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
</div>
<div th:fragment="bottombar">
    <footer class="footer-area text-center">
        Copyright &copy;<script>document.write(new Date().getFullYear());</script>
        All rights reserved | <a href="http://www.beian.miit.gov.cn/">蜀ICP备19028948号</a> | This template is made with <i
            class="fa fa-heart-o" aria-hidden="true"></i> by <a
            href="https://colorlib.com" target="_blank">Colorlib</a>
    </footer>
</div>
<div th:fragment="sidebar">
    <div class="post-sidebar-area">
        <!-- Widget Area -->
        <div class="sidebar-widget-area">
            <button type="button" class="btn original-btn" data-toggle="collapse" data-target="#thanks">Donate</button>
            <div id="thanks" class="collapse">
                <p class="mt-2">本站点主要是个人站点，站点内容与代码均可免费使用，正是有您的支持和鼓励，让我能坚持下去。如果您觉得这些资源对您带来了帮助，欢迎给网站捐赠。捐赠费用将用于网站的日常运营。</p>
                <div id="accordion">
                    <div class="card">
                        <div class="card-header">
                            <a class="collapsed card-link" data-toggle="collapse" href="#alipay">
                                <strong>支付宝</strong> (<abbr
                                    title="Alipay is an eWallet payment method, a secure place where your shoppers can store funds to be used online.">ALIPAY</abbr>)
                            </a>
                        </div>
                        <div id="alipay" class="collapse" data-parent="#accordion">
                            <div class="card-body">
                                <img src="/global/img/donate/zhifubao.jpg" class="img-fluid">
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <a class="collapsed card-link" data-toggle="collapse" href="#wechat">
                                <strong>微信支付</strong> (<abbr
                                    title="WeChat Pay empowers merchants to connect with consumers before, during, and after sales through innovative marketing platforms in the WeChat ecosystem.">WECHAT
                                PAY</abbr>)
                            </a>
                        </div>
                        <div id="wechat" class="collapse" data-parent="#accordion">
                            <div class="card-body">
                                <img src="/global/img/donate/wechat.png" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Widget Area -->
        <div class="sidebar-widget-area" th:if="${top.size() > 0}">
            <h5 class="title">Hot Posts</h5>
            <div class="widget-content">
                <div th:each="post:${top}" class="single-blog-post d-flex align-items-center widget-post">
                    <!-- Post Thumbnail -->
                    <div class="post-thumbnail">
                        <img class="img-fluid" th:src="${post.cover}" alt="">
                    </div>
                    <!-- Post Content -->
                    <div class="post-content">
                        <a th:href="${'/blog/list?cid=' + post.category.cid}" class="post-tag"
                           th:text="${post.category.desc}"></a>
                        <h4><a th:href="${'/blog/article?id=' + post.id}" class="post-headline"
                               th:text="${post.title}"></a></h4>
                        <div class="post-meta">
                            <p><a th:text="${post.createDate}"></a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Widget Area -->
        <div class="sidebar-widget-area" th:if="${tags.size() > 0}">
            <h5 class="title">Tags</h5>
            <div class="widget-content">
                <ul class="tags">
                    <li th:each="tag:${tags}"><a th:href="${'/blog/list?tid=' + tag.id}" th:text="${tag.desc}"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>
